<!-- 回放 -->
<template>
	<div class="palyBack">
		<el-divider content-position="left">回放轴</el-divider>
		<!-- <el-text type="warning">{{ state.tipText }}</el-text> -->
		<div class="timeTip">
			<span class="before">前</span>
			<span class="time">{{ startPlayTime.min }} </span>
			<span class="unit">分</span>
			<span class="time">{{ startPlayTime.sec }}</span>
			<span class="unit">秒</span>
		</div>

		<el-slider style="width: 90%; margin: 0 auto" v-model="state.startPlayTime" :min="10" :step="5" :max="600" size="default" />

		<div class="sliderBlock">
			<el-input-number v-model="state.startPlayTime" :step="5" :min="10" :max="600" placeholder=""></el-input-number>

			<el-button v-if="!state.isPlay" :disabled="state.startPlayTime == 0" long type="success" size="default" @click="play" :icon="VideoPlay"
				>播放</el-button
			>
			<el-button v-else type="danger" size="default" @click="stop" :icon="VideoPause">停止</el-button>
		</div>

		<el-divider style="margin: 60px 0 30px 0" content-position="left">更新事件追溯视频</el-divider>

		<el-text type="warning">{{ state.tipText1 }}</el-text>
		<br />
		<div class="videoHistory">
			<!-- <el-input-number size="default" v-model="state.beforeVideoTime" :min="3" :max="10"><template #append> 秒 </template></el-input-number> -->
			<el-input v-model="state.beforeVideoTime" placeholder="请填入时间" type="number" :step="5" :min="10" :max="600">
				<template #append> 秒 </template>
			</el-input>
			<el-button type="primary" size="default" @click="getVideoFile" :icon="VideoCamera">确定</el-button>
		</div>
	</div>
</template>

<script lang="ts" setup name="Playback">
import { CSSProperties, computed, onMounted, reactive, ref, watch } from 'vue';
import { VideoPause, VideoPlay, VideoCamera } from '@element-plus/icons-vue';
import { smokeStore } from '/@/stores/smoke';
import { useUserInfo } from '/@/stores/userInfo';
import { getUrl } from '/@/utils/hm';
import { time } from 'console';

let wsConn = smokeStore().wsConn;
const emit = defineEmits(['startplayback']);

const props = defineProps({
	curAlarm: {
		type: Object,
		default: () => {
			return {};
		},
	},
});

watch(
	() => smokeStore().deviceParams,
	(newValue: any) => {
		const { recordSearch } = newValue;

		if (recordSearch) {
			state.recordSearchData = recordSearch;
		}
	},
	{
		deep: true,
	}
);

onMounted(() => {
	recordSearch();

	watch(
		() => state.startPlayTime,
		(newValue: any) => {
			state.isPlay = false;
			state.beforeVideoTime = newValue;
		}
	);
});

const startPlayTime = computed(() => {
	let min = Math.floor(state.startPlayTime / 60);
	let sec = state.startPlayTime % 60;
	return {
		min,
		sec,
	};
});

const state = reactive({
	tipText: '请选择需要预览前 n 秒,确定进行预览。如非必要请不要使用！',
	tipText1: '如默认采集视频不能完全取证，请通过回看确定采集时长更新报警事件视频取证,单位秒',
	isPlay: false,
	startPlayTime: 10, // 默认 10s
	beforeVideoTime: 10,
	recordSearchData: {},
});

function play() {
	state.isPlay = true;
	let eventTime = new Date(props.curAlarm.createdAt).getTime();
	let setTime = state.startPlayTime;
	let startTime = eventTime / 1000 - setTime;

	// console.log({ eventTime, setTime, startTime });

	emit('startplayback', startTime);
}

function stop() {
	state.isPlay = false;

	let pushUrl = getPushUrl();

	let params = {
		cmdType: 'closePlaybackVideo',
		deviceCode: props.curAlarm.deviceCode,
		data: {
			url: pushUrl,
		},
	};

	JSON.stringify(params);

	wsConn.send(JSON.stringify(params));
}

// 获取RTMP播放地址
function getPushUrl() {
	let webrtcUrl = getUrl('webrtcUrl');
	let uid = useUserInfo().userInfos.id;
	let pushUrl = `rtmp://${webrtcUrl}:1984/review/${props.curAlarm.deviceCode}_${uid}`;
	return pushUrl;
}

// 获取视频下载地址
function getDownloadUrl() {
	let webrtcUrl = getUrl('webrtcUrl');
	let uid = useUserInfo().userInfos.id;
	let timestr = new Date().getTime();
	let pushUrl = `rtmp://${webrtcUrl}:1984/alarmBefore/${props.curAlarm.eventId}@t${timestr}`;

	return pushUrl;
}

// 获取视频存储时间 用来判断个的的回放时间是否存在
function recordSearch() {
	let params = {
		cmdType: 'recordSearch',
		deviceCode: props.curAlarm.deviceCode,
		data: null,
	};

	JSON.stringify(params);
	wsConn.send(JSON.stringify(params));
}

function getVideoFile() {
	let downloadUrl = getDownloadUrl();
	let eventTime = new Date(props.curAlarm.createdAt).getTime();

	let setTime = state.beforeVideoTime;
	let startTime = eventTime / 1000 - setTime;

	let params = {
		cmdType: 'startDownloadFile',
		deviceCode: props.curAlarm.deviceCode,
		data: {
			type: 1, // 1:报警前 2，报警后
			startTime: startTime,
			endTime: eventTime / 1000 + 5,
			url: downloadUrl,
		},
	};

	JSON.stringify(params);
	wsConn.send(JSON.stringify(params));

	// setTimeout(() => {
	// 	stopVideoFile(downloadUrl);
	// }, 10000);
}

function stopVideoFile(url: string) {
	let params = {
		cmdType: 'stopDownloadFile',
		deviceCode: props.curAlarm.deviceCode,
		data: {
			url: url,
		},
	};
	JSON.stringify(params);
	wsConn.send(JSON.stringify(params));
}
</script>
<style lang="scss" scoped>
.palyBack {
	padding: 10px;
}

.timeTip {
	text-align: center;
	.before {
		font-size: 14px;
		margin-right: 20px;
		color: #f56c6c;
	}
	.time {
		font-size: 30px;
		color: #67c23a;
		padding: 0 10px;
	}
	.unit {
		font-size: 14px;
		color: #c8c9cc;
	}
}

.sliderBlock {
	display: flex;
	align-items: center;
	justify-content: end;
	gap: 20px;
}
.videoHistory {
	display: flex;
	justify-content: flex-end;
	gap: 20px;
	margin: 30px 0 0px 0;
}

:deep(.el-alert) {
	border: none;
}
</style>
